
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>知乎 - 与世界分享你的知识, 经验和见解</title>
	<link rel="short icon" href="/assets/images/favicon.ico" type="image/x-icon">
	<link rel="stylesheet" href="/layout/css/bootstrap.min.css">
	<link rel="stylesheet" href="/layout/css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="/layout/layout.css">
	<link rel="stylesheet" href="/layout/login.css">
	<script src="/layout/js/jquery.js"></script>
	<script src="/layout/js/bootstrap.min.js"></script>
	<script src="/layout/js/jquery.validate.min.js"></script>
	<script src="/layout/js/holder.js"></script>
    <style>
        #register-form .error{
            color: red;
        }
        #register-form .success{
            color: greenyellow;
        }
    </style>
</head>
<body>
	<div class="container">
		<div class="col-md-4 col-md-offset-4 text-center" id="notice">
            @if (count($errors) > 0)
                <div class="mws-form-message alert-danger">
                    出错啦!!!
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{$error}}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            @if (session('error'))
                <div class="mws-form-message alert-danger">
                    {{session('error')}}
                </div>
            @endif
            @if (session('success'))
                <div class="mws-form-message alert-success">
                    {{session('success')}}
                </div>
            @endif
			<div id="logo" class="col-md-6 col-md-offset-3">
				<img width="145" src="/assets/images/logo.png" alt="">
			</div>
			<div id="logo-text" class="col-md-12 text-center">与世界分享你的知识、经验和见解</div>
			<div class="col-md-12">
				<ul id="nav-btn" class="list-unstyled list-inline text-center">
					<li id="register">注册</li>
					<li id="login" class="active">登录</li>
				</ul>
				<div class="col-md-12" id="register-form"  style="display: none;">
					<form action="/register" method="post" id="register_form">
						<input type="text" name="username" class="form-control" placeholder="姓名" aria-describedby="basic-addon1">
						<input type="text" name="phone" class="form-control" placeholder="手机号(仅支持大陆用户)" aria-describedby="basic-addon1">
						<input type="password" name="password" class="form-control" placeholder="密码(不少于6位)" aria-describedby="basic-addon1">
                        {{csrf_field()}}
                        <div id="register_btn" class="btn btn-info">注册知乎</div>
                        <div id="xieyi" class="text-center">点击「注册」按钮，即代表你同意<a href="">《知乎协议》</a></div>
					</form>
					<script>
                        $('#register_btn').click(function(){
                            $('#register_form').submit();
                        });
                        $('#register_form').validate({
                            rules: {
                                username : {
                                    required:true,
                                    rangelength: [5,18]
                                },
                                phone : {
                                    required:true,
                                    minlength: 11,
                                    number:true,
                                    digits:true
                                },
                                password : {
                                    required:true,
                                    rangelength: [6,20]
                                }
                            },
                            messages:{
                                username:{
                                    required: '用户名不能为空',
                                    rangelength: '用户名长度必须在5-18位之间'
                                },
                                phone : {
                                    required : '手机号不能为空',
                                    minlength: '最少为11位',
                                    number: '手机号必须为数字'
                                },
                                password:{
                                    required: '密码不能为空',
                                    rangelength: '密码长度必须在6-20位之间'
                                }
                            }
                        });
                        $('#register_form').find('input').focus(function(){
                            $(this).next('label').remove();
                        });
                        $('#register_form').find('input[name=username]').blur(function(){
                            var error = $('<label id="username-error" class="error" for="username">用户名已存在! </label>');
                            var success = $('<label id="username-error" class="success" for="username">该用户名可用! </label>');
                            if($(this).val().length >= 5){
                                var data = {
                                    username : $(this).val(),
                                    _token : $('#register_form').find('input[name=_token]').val()
                                };
                                $.post('/register/api', data, function(res){
                                    if(res == '0'){
                                        $('#register_form').find('input[name=username]').after(error);
                                    }else{
                                        $('#register_form').find('input[name=username]').after(success);
                                    }
                                });
                            }
                        });
					</script>
				</div>
				<div class="col-md-12" id="login-form" style="display: block;">
					<form action="/login" method="post" id="login_form">
						<input type="text" class="form-control" placeholder="用户名" aria-describedby="basic-addon1" name="username">
						<input type="password" class="form-control" name="passwd" placeholder="密码" aria-describedby="basic-addon1">
						{{csrf_field()}}
						<button id="login_btn" class="btn btn-info" form="login_form">登录</button>
						<div id="login-others" class="col-md-6"><a href="#">手机验证码登录</a></div>
						<div id="login-error" class="col-md-6 text-right"><span>无法登录?</span></div>
						<div id="login-others" class="col-md-12">
							<!-- <ul id="login-flink" class="list-unstyled list-inline">
								<li>社交账号登录</li>
								<li><img data-src="holder.js/20x18?text=1&bg=#ddd" alt=""></li>
								<li><img data-src="holder.js/20x18?text=1&bg=#ddd" alt=""></li>
								<li><img data-src="holder.js/20x18?text=1&bg=#ddd" alt=""></li>
							</ul> -->
						</div>
					</form>
                    <script>
                        var login = $('#login_form');
                        var isLogin = false;
                        $('#login_btn').click(function(){
                            var data = {
                                name : login.find('input[name=username]'),
                                passwd : login.find('input[name=passwd]'),
                                _token : login.find('name=[name=_token]')
                            };
                            $.ajax({
                                url: '/api/login',
                                type: 'post',
                                dataType: 'json',
                                data: data,
                                async:false,
                                success:function(res){
                                    if(res.status){
                                        $('#notice').removeClass('alert-danger');
                                        isLogin = true;
                                        var content = '<div class="mws-form-message alert-success">'+res.content+'</div>';
                                    }else{
                                        isLogin = false;
                                        var content = '<div class="mws-form-message alert-danger">'+res.content+'</div>';
                                    }
                                    $('#notice').html(content);
                                }
                            });
                            return false;
                            if(isLogin){
                                return true;
                            }else{
                                return false;
                            }
                        });
                    </script>
				</div>
			</div>
		</div>
		<script>
			$('#register').click(function() {
				if(!$(this).attr('class')){
					$(this).addClass('active');
					$('#login').removeClass('active');
					$('#login-form').hide();
					$('#register-form').show();
				}
			});
			$('#login').click(function() {
				if(!$(this).attr('class')){
					$(this).addClass('active');
					$('#register').removeClass('active');
					$('#login-form').show();
					$('#register-form').hide();
				}
			});
			$('#login-flink li:first').click(function() {
				$(this).siblings().fadeToggle();
			});
		</script>
		<div id="footer" class="col-md-6 col-md-offset-3 text-center">
			<p>© 2017 知乎
				<a href="#">知乎圆桌</a>-
				<a href="#">发现</a>-
				<a href="#">移动应用</a>-
				<a href="#">使用机构账号登录</a>-
				<a href="#">联系我们</a>-
				<a href="#">来知乎工作</a>
			</p>
			<p>京 ICP 证 110745 号 · 京公网安备 11010802010035 号 · 出版物经营许可证</p>
		</div>
	</div>
    <!-- 聊天框框 start -->
    <div class="chat">

    </div>
    <!-- 聊天框框 end -->
</body>
</html>